<template>
  <el-container>
    <el-header height="auto">
      <div>
        <span class="text-h">
          {{ question.name }}
        </span>
        <!-- source:{{ question.source }} dataform:{{ question.dataform }} -->
      </div>
    </el-header>
    <el-main class="padding-top0" v-show="$route.name === '题目详情'">
      <contextlist v-bind="{ question }"></contextlist>
    </el-main>
  </el-container>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import { asyncgetquestion } from '../../../api';
import Studycodemodel from '../../../mysql_interface/studycodemodel';
import contextlist from '../../../ojSass/components/watchQuestion/contextlist.vue';
import { markdownhtml } from '../../../util/htmlstring';
const prop = defineProps<{ ID: number }>()

const question = ref<Studycodemodel.Iquestion>({})

watch(() => prop.ID, () => {
  start()
})

onMounted(async () => {
  start()
})

async function start() {
  const e = await asyncgetquestion({ ID: prop.ID })
  const data = markdownhtml(e) as Studycodemodel.Iquestion
  question.value = Object.assign(question, data);
  return question
}

</script>
<style scoped>
.text-h {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-303133);
}
</style>
